<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        div标签内 有多少个子一级节点 ? 分别是什么
        1. 文本节点 一个换行+四个空格 +hello+ 换行+四个空格
        2. 元素节点 p标签
        3. 文本节点  换行+四个空格
        4. 注释节点   注释的内容(空格换行都算)
        5. 文本节点  换行+四个空格
        6. 元素节点 p标签
        7 文本节点  换行+四个空格 + world + 换行 + 空格



     -->
    <div class="kangbazi" id="no1">
        hello 
        <p>你好</p>
        <!-- 我是注释 -->
        <p>世界</p>
        world
    </div>
    <script>
        // 之前获取的是元素 

        // dom节点  

        // 什么dom节点?
        // 构成页面的每个组分部分?
        //  标签 
        //  属性
        //  文本
        //  注释


        // dom节点分类 

        //  元素节点   页面上的每个标签  注意只有标签 <div></div>
        //  属性节点   书写在标签上的属性   class="kangbazi"
        //  => 不作为独立的节点出现 只写在标签上 对标签一个描述行为
        //  => 属性节点不和任何节点产生父子关系 
        //  文本节点    所有书写的文本内容  (包含空格和换行 )
        //  注释节点    书写在页面上的注释  (包含换行和空格)

    </script>
</body>
</html>